<template>
    
    <div id="slider" class="mui-slider">

				<!-- 滑动导航条 -->
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<!--默认第个全部高亮的办法  -->
						<!-- class 属性绑定 用三元运算 判断当前高亮的 id是否是0 如果是就 返回一个 mui-active 样式 高亮
						如果不是 就返回一个空字符串 -->
						<!-- 注意：1.不要使用三元原酸去判断 样式的问题
							       2.循环注册点击事件 事件中引用 getAllpohoteId事件 并传入每个滑动导航栏 的Id-->
						<!-- <a :class="['mui-control-item',item.id == 0 ? 'mui-active':'']" v-for="item in cates" :key="item.id"
						@tap="getAllpohoteId(item.id)">						 
						</a> -->

						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							热点
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							北京
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							社会
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							娱乐
						</a>
						<a class="mui-control-item" href="#item6mobile" data-wid="tab-top-subpage-6.html">
							科技
						</a>
						<a class="mui-control-item" href="#item6mobile" data-wid="tab-top-subpage-6.html">
							科技
						</a>
						<a class="mui-control-item" href="#item6mobile" data-wid="tab-top-subpage-6.html">
							科技
						</a>
					</div>
				</div>



				<!-- 懒加载 图片 -->
				<!-- <ul class="photo-list"> -->
					<!-- 循环遍历 得到每个图片 每个图片对应着一个Id 现在就是路由跟着Id去到响应的页面 -->
				<!-- <router-link v-for="item in list" :key="item.id" to="'/home/photoinfo'+item.id">
					<img v-lazy="item"  >
					<div class="info">
						<h1 class="info-title">{{ item.title }}</h1>
						<div class="body">{{ item.zhaiyao }}</div>
					</div>
				</router-link>
				</ul> -->

				<ul class="boxul">
					<!-- 根据 -->
					<router-link to="/home/photoinfo/1" tag="li">
						<img src="../../images/01.jpg" alt="">
						<div class="info">
						<h1 class="info-title">瞎说瞎说瞎说</h1>
						<div class="body">小柴胡颗粒小柴胡颗粒小柴胡颗粒小柴胡颗粒
							什么要追我！！！因为你有急支糖浆
						</div>
					</div>
					</router-link>
					
					
				</ul>

			</div>
</template>

<script>

//1.导入 mui 的头部导航栏滑动 js文件
import mui from '../../lib/mui/js/mui.js'



export default {
    data(){
        return {
			cates:[	//所有分类的组

			],
			list:[	//存放所有图片

			]
		}
    },
    mounted (){ //当组件的DOM结构 被渲染好 并放在页面中后 会执行这个 钩子函数
		// //2初始化滑动控件
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
	},
	created(){
		this.getAllcategories();
		//默认进入页面 就主动请求 所有图片列表的数据 传入0 ID0的主页是 全部 所以默认进入页面是全部
		this.getAllpohoteId(0);
	},
    methods:{
		getAllcategories(){
			//获取所有的图片
			// this.$http.get('api/getimgcategory').then(result => {
			// 	if(result.body.status === 0){
			// 		//手动拼接最完整的 分类列表
			// 		result.body.message.unshift({title:"全部",id:0});
			// 		this.cates = result.body.message;
			// 	}else{

			// 	}
			// })
		},

		//需要调用两次方法
		//1.进入页面的时候就要展示页面 所以要在页面初始化好的时候 就要调用一次
		//2.用户店家 不同分类的时候 也 同时要调用一次 刷新数据
		getAllpohoteId(cateId){ //根据分类Id 获取图片列表
			// this.$http.get('api/getimages/'+ cateId).then(result =>{
			// 	if(result.body.status === 0){
			// 		this.list = result.body.message;
			// 	}
			// })
		}
	},

}
</script>

<style lang="scss" scoped>
    * {
		touch-action: pan-y;
	}
	
	.photo-list {
		list-style: none;
		margin: 0;
		padding: 10px;
		li {
			background-color: #ccc;
			text-align: center;
			margin-bottom: 10px;
			box-shadow: 0 0 8px #ccc;
			position: relative;
			img {
				width: 100%;
				vertical-align: middle;
			}
			image[lazy=loading] {
				width: 40px;
				height: 300px;
				margin: auto;
		    }
			.info {
				color: width;
				text-align: center;
				position: absolute;
				bottom:0;
				background-color: rgba(0,0,0,0.4);
				max-height: 100px;
				.info-title {
					font-size: 14px;
				}
				.info-body {
					font-size: 13px;
				}
			}
		}
	}


	.boxul{
		padding: 0 10px;
		li{
			margin-bottom: 10px;
			list-style: none;
			box-shadow: 0 0 6px #ccc;
			position: relative;
		}
		img{
			width: 100%;
			vertical-align: middle;
			max-height: 300px;
		}
		.info {
			position: absolute;
			bottom: 0;
			text-align: center;
			color: white;
			background-color: rgba(0,0,0,0.4);
			width:100%;
		}
		.info-title {
			font-size: 20px;
			}
		.info-body {
			font-size: 13px;
		}
	}

</style>
